<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>

  <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script src="../js/libs/art-template.js"></script>
</head>
<body>
  <div id="table">
      <!------分割线----->
      一般ajax写法：
    <table style="margin-bottom: 30px" width="100%" border="1" cellpadding="0" cellspacing="0">
      <tr>
          <!--表格标签头是th-->
          <th>lottery_number</th>
          <th>end_time</th>
          <th>period_result</th>
          <th>period_code</th>
          <th>state</th>
          <th>now_time</th>
          <th>pid</th>
      </tr>
      <tbody id="bg"></tbody>
    </table>

      <!------分割线----->
      template写法：
      <table style="margin-bottom: 30px" width="100%" border="1" cellpadding="0" cellspacing="0">
          <tr>
              <!--表格标签头是th-->
              <th>lottery_number</th>
              <th>end_time</th>
              <th>period_result</th>
              <th>period_code</th>
              <th>state</th>
              <th>now_time</th>
              <th>pid</th>
          </tr>
          <tbody id="bg2"></tbody>
      </table>
        <!--id必须-->
      <script id="tableTem" type="text/html">
            {{ each $data value index}}
            <tr>
                <!--value既是循环的每个对象，index是索引-->
                <th>{{value.lottery_number}}</th>
                <th>{{value.end_time}}</th>
                <th>{{value.period_result}}</th>
                <th>{{value.period_code}}</th>
                <th>{{value.state}}</th>
                <th>{{value.now_time}}</th>
                <th>{{value.pid}}</th>
            </tr>
            {{/each}}
        </script>


      <!------分割线----->
      es6写法：
      <table style="margin-bottom: 30px" width="100%" border="1" cellpadding="0" cellspacing="0">
          <tr>
              <!--表格标签头是th-->
              <th>lottery_number</th>
              <th>end_time</th>
              <th>period_result</th>
              <th>period_code</th>
              <th>state</th>
              <th>now_time</th>
              <th>pid</th>
          </tr>
          <tbody id="bg3"></tbody>
      </table>
  </div>


  <script>
    // 请求的url https://www-api.931ejob.com/lottery/play/info?id=40
    // 任务：把history_results数据 写成表格展示在页面上
    // start you code
    $(document).ready(function(e) {
//        $.ajax({
//            url: "https://www-api.931ejob.com/lottery/play/info?id=40",
//            dataType: "text",
//            data:"history_results",  //data不是这么用的，看下post和get的区别，我们这个接口默认是get,不用传参
//            success: function (data) {
//                var hang = data.split("{");  //拆分字符“|”串：显示行
//
//                var str = "";
//                for (var i = 4; i < hang.length; i++) {
//                    var lie = hang[i].split(",\"");//拆分字符串“^”:显示列
//                    str += "<tr><td>" + lie[0] + "</td><td>" + lie[1] + "</td><td>" + lie[2] + "</td><td>" + lie[3] + "</td><td>" + lie[5] + "</td><td>" + lie[6] + "</td><td>"+lie[7]+"</td></tr>";   //显示的行和单元格
//
//                }
//                $("#bg").html(str);
//                console.log(data)
//
//            }
//
//        })
        //正常一般公司是这样写
        $.ajax({
            url: 'https://www-api.931ejob.com/lottery/play/info?id=40',
            dataType: 'json',
            success: function(res){
            	var history_results = res.data.history_results; //变量命令尽量保持原样
                var html = ''; //需要动态拼接的html
                for(var i = 0; i < history_results.length; i++){
	                html += "<tr>"
                                +"<td>"+ history_results[i].lottery_number +"</td>"
                                +"<td>"+ history_results[i].end_time +"</td>"
                                +"<td>"+ history_results[i].period_result +"</td>"
                                +"<td>"+ history_results[i].period_code +"</td>"
                                +"<td>"+ history_results[i].state +"</td>"
                                +"<td>"+ history_results[i].now_time +"</td>"
                                +"<td>"+ history_results[i].pid +"</td>"
                            +"<tr>"
                }
	            $("#bg").html(html);
            }
        })

        //template语法这样写
	    $.ajax({
		    url: 'https://www-api.931ejob.com/lottery/play/info?id=40',
		    dataType: 'json',
		    success: function(res){
		    	//template方法对应参数 1.模版id  2.传入模版的数据，对应$data
			    $("#bg2").html(template('tableTem', res.data.history_results));
		    }
	    })

        //es6 语法这样写，兼容性有问题，一般不直接用
        fetch('https://www-api.931ejob.com/lottery/play/info?id=40')
        .then(res => res.text())
        .then(res => {
        	res = JSON.parse(res)
        	var html = '';
        	res.data.history_results.map(item => {
        		html += `<tr>
                            <td>${item.lottery_number}</td>
                            <td>${item.end_time}</td>
                            <td>${item.period_result}</td>
                            <td>${item.period_code}</td>
                            <td>${item.state}</td>
                            <td>${item.now_time}</td>
                            <td>${item.pid}</td>
                        </tr>`
            })
            $('#bg3').html(html)
        })
    })


  </script>
</body>
</html>